<template>
  <div id="dic_warp">
    <!--翻页组件（真翻页）-->
    <table-box @turnPage="search" :pagination="pagination">
      <div slot="search" class="fl">
        <el-button type="text"
                   class="primary_btn"
                   @click.stop="addDic"
                   size="mini">
          <i class="el-icon-plus"></i>{{$t('configLazyLoad.dicConfig.addDic')}}</el-button>
        <el-input
          size="mini"
          :placeholder="$t('configLazyLoad.businessConfig.dicConfigTip')"
          @keyup.enter.native="search"
          v-model="serachName"
          style="width:210px"
        >
          <i
            class="el-input__icon el-icon-search"
            slot="suffix"
            @click.stop="search">
          </i>
        </el-input>
      </div>
      <!--字典表格-->
      <dicTable :tableHeader="tableHeader"
                :tableData="tableData"
                slot="table"
                @updata="updata"
                :loading="tableLoading" @copyJump="copyJump"></dicTable>
    </table-box>
    <!--右侧滑出框-->
      <rightLayout :visible="rightLayoutObj.showAddEdit" @close="closeRightLayoutFun" @save="saveFun" :width="rightLayoutObj.width" :title="firstTitle">
        <!--添加字典组件-->
        <dicAddNew ref="dicAddNewRefs" :editOrAddForm="editOrAddForm" :isNewDic="isNewDic" @refresh="initData" :newModel="dicConfigData"></dicAddNew>
      </rightLayout>
  </div>
</template>
<script>
  import search from '../../../config/channelConfig/base/search'
  import dicTable from '../../../config/dicConfig/dicTable.vue'
  import dicAddNew from '../../../config/dicConfig/dicAddNew.vue'
  import tableBox from '../base/tableBox'
  import rightLayout from '../base/rightLayout.vue'
  export default {
    name: 'dicManage',
    props: {
      // 自动初始化组件
      autoInit: {type: Boolean, defualt: false}
    },
    data () {
      return {
        tableHeader: [
          {prop: 'name', label: this.$t('configLazyLoad.businessConfig.dicName')},
          {prop: 'cascade', label: this.$t('configLazyLoad.businessConfig.cascadeRelationship')},
          {prop: 'updateTimeArr', label: this.$t('configLazyLoad.businessConfig.editTime')},
          {prop: 'handel', label: this.$t('public.operate'), isApp: 'true'}
        ],                        //   自定义 表头
        tableData: [],            //   表格数据
        tableLoading: false,      //   表格  loading
        isShowDicConfigEdit: false,   //   右侧 配置字典
        isLoadingAddOrEdit: false,
        firstTitle: this.$t('configLazyLoad.dicConfig.addDic'),
        serachName: '',
        editOrAddForm: {
          _id: '',
          cascade: 1,
          name: ''
        },   // 修改添加字典数据
        dicConfigData: {},
        sdkData: {},
        versionData: {},
        isNewDic: false,
        rightLayoutObj: {
          width: '1100px',
          showAddEdit: false
        },
        pagination: {
          currentPage: 1,
          count: 0
        },
        isEdit: false
      }
    },
    components: {
      search,
      dicTable,
      dicAddNew,
      rightLayout,
      tableBox
    },
    methods: {
      saveFun () {
        this.$refs.dicAddNewRefs.onSubmit()
      },
      addDic () {
        this.firstTitle = this.$t('configLazyLoad.dicConfig.addDic')
        this.isNewDic = true
        this.editOrAddForm.cascade = '1'
        this.editOrAddForm.name = ''
        this.editOrAddForm._id = ''
        this.rightLayoutObj.showAddEdit = true
        this.dicConfigData = {}
      },
      initData (isEdit) {
        this.$nextTick(() => {
          this.serachName = ''
          this.rightLayoutObj.showAddEdit = false
          this.search()
        })
      },
      closeRightLayoutFun () {
        this.rightLayoutObj.showAddEdit = false
      },
      search (val,data,num) {
        this.tableLoading = true
        let page = typeof val === 'number' ? val : 1
        if (this.isEdit) {
          page = this.pagination.currentPage
          this.isEdit = false
        }
        if(num){
          page = num
        }
        this.$store.dispatch('dicQueryList', {page: page, limit: 10, name: this.serachName}).then((res) => {
          if (res.success) {
            let tableData = res.list.map((item) => {
              item.updateTimeArr = (item.updateTimeArr || []).map((item) => {
                return item.updateTime || ''
              })
              item.showUpdateTime = false
              return item
            })
            // 如果没有最后更新时间的处理
            this.versionData = res.version
            this.tableData = tableData
            this.pagination.count = res.count
            this.pagination.currentPage = page
            this.tableLoading = false
            if(data){
              this.isEdit = true
              this.rightLayoutObj.showAddEdit = false
              this.isNewDic = false
              this.isLoadingAddOrEdit = true
              //复制成功跳转配置页
              let editData = this.tableData.filter(item => item._id === data._id)[0]
              this.editOrAddForm._id = editData._id
              this.editOrAddForm.cascade = editData.cascade.toString()
              this.editOrAddForm.name = editData.name
              this.firstTitle = this.$t('configLazyLoad.dicConfig.dicConfig')
              this.isSuccess = true
              this.dicConfigData = data
              this.isLoadingAddOrEdit = false
              this.rightLayoutObj.showAddEdit = true
            }
          }
        })
      },
      updata (val) {
        let id = val._id
        this.isEdit = true
        this.rightLayoutObj.showAddEdit = false
        this.isNewDic = false
        this.isLoadingAddOrEdit = true
        this.$store.dispatch('dicfindOneAppDic', {_id: id}).then(res => {
          if (res.success) {
            let editData = this.tableData.filter(item => item._id === id)[0]
            this.editOrAddForm._id = editData._id
            this.editOrAddForm.cascade = editData.cascade.toString()
            this.editOrAddForm.name = editData.name
            this.firstTitle = this.$t('configLazyLoad.businessConfig.editDic')
            this.dicConfigData = res.data
            this.isLoadingAddOrEdit = false
            this.rightLayoutObj.showAddEdit = true
          }
        })
      },
      copyJump(data,flag){
        this.$store.dispatch('addCache', { type: 'options', data: data })
        this.search()
        if(flag && data){
          this.search('',data,Math.ceil((this.pagination.count + 1)/10))
        }
      },
    },
    beforeMount () {
      if (this.autoInit) {
        this.initData()
      }
    }
  }
</script>
<style lang="stylus">
  #dic_warp
    .wrapper
      .card-group
        height auto
</style>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .internetChannelSkillWrap
    .title
      color $c-prompt
      height 30px
      line-height 30px
      padding 3px 10px
      border-bottom 1px solid $c-border1
  #dic_warp
    padding: 16px
  .showDetialTitle
    padding: 8px 20px
    font-weight: 600
    font-size: 14px
  .searchWrap
    position: relative
    border-left: 1px solid #d9d9d9
    border-top: 1px solid #d9d9d9
  .cancel
    margin-right 20px
  .btn_warp
    height 30px
    margin 20px 0
</style>
